<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>租房信息列表</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/font-awesome-4.7.0/css/font-awesome.min.css}">

</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">

                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">装修情况</label>
                        <div class="layui-input-block">
                            <select name="decoration" class="decoration_select">
                                <option value="">请选择</option>
                                <option value="毛坯" >毛坯</option>
                                <option value="简单装修" >简单装修</option>
                                <option value="精装修" >精装修</option>
                                <option value="豪华装修" >豪华装修</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">房屋类型</label>
                        <div class="layui-input-block">
                            <select id="type" name="type" class="type_select">
                                <option value="">请选择</option>
                                <option value="普通住宅" >普通住宅</option>
                                <option value="公寓" >公寓</option>
                                <option value="别墅" >别墅</option>
                                <option value="其他" >其他</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">户型</label>
                        <div class="layui-input-block">
                            <input type="text" id="houseType" name="houseType" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>


                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">地区</label>
                        <div class="layui-input-block">
                            <select name="region" class="region_select">
                                <option value="">请选择地区</option>
                                <option th:each="region : ${session.regionList}" th:value="${region.regionName}" th:text="${region.regionName}"> </option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-inline" style="width: 280px">
                        <label class="layui-form-label">小区</label>
                        <div class="layui-input-block">
                            <input type="text" id="housingEstate" name="housingEstate" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">租房类型</label>
                        <div class="layui-input-block">
                            <select name="rentType" class="rentType_select">
                                <option value="">请选择</option>
                                <option value="整租" >整租</option>
                                <option value="合租" >合租</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">朝向</label>
                        <div class="layui-input-block">
                            <select name="orientation" class="orientation_select">
                                <option value="">请选择</option>
                                <option value="东" >东</option>
                                <option value="南" >南</option>
                                <option value="西" >西</option>
                                <option value="北" >北</option>
                                <option value="东南" >东南</option>
                                <option value="东西" >东西</option>
                                <option value="南北" >南北</option>
                                <option value="西南" >西南</option>
                                <option value="东北" >东北</option>
                                <option value="西北" >西北</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="width: 230px">
                        <label class="layui-form-label">楼层</label>
                        <div class="layui-input-block">
                            <select name="floorLevel" class="floorLevel_select">
                                <option value="">请选择</option>
                                <option value="底层" >底层</option>
                                <option value="低层" >低层</option>
                                <option value="中层" >中层</option>
                                <option value="高层" >高层</option>
                                <option value="顶层" >顶层</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline" style="width: 340px">
                        <label class="layui-form-label">标题</label>
                        <div class="layui-input-block">
                            <input type="text" id="title" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-admin" data-type="search_table">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
                    <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
                </div>

                <table id="table" lay-filter="table"></table>

            </div>

        </div>
    </div>

    <script th:src="@{/layuiadmin/layui/layui.js}"></script>

    <script type="text/html" id="table_admin">
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail"><i class="fa fa-file-text-o"></i>详细查看</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="fa fa-pencil"></i>编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="fa fa-trash-o"></i>删除</a>
    </script>

    <script>

        layui.use(['jquery','layer', 'table'], function(){
            var table = layui.table;
            var layer = layui.layer;
            var $ = layui.jquery;

            //执行一个 table 实例
            table.render({
                elem: '#table',
                height: 450,
                url: '/rentHouse/rentHouseList', //数据接口
                title: '租房信息列表',
                page: true,
                limit: 5,
                limits: [5,10,15,20],
                toolbar: true,
                cols: [
                    [ //表头
                    {type: 'checkbox', fixed: 'left'},
                    {title: '序号',templet: '#indexTpl',width:60},
                    {field: 'title', title: '标题', width:188},
                    {field: 'linkman', title: '联系人', width: 80},
                    // {field: 'phone', title: '手机号', width: 120},
                    {field: 'region', title: '地区', width:70},
                    {field: 'housingEstate', title: '小区', width:120},
                    {field: 'rentType', title: '租房类型', width: 90},
                    {field: 'type', title: '房屋类型', width: 90},
                    {field: 'decoration', title: '装修情况', width: 90},
                    {field: 'orientation', title: '朝向', width: 60},
                    {field: 'floorLevel', title: '楼层', width: 60},
                    {field: 'publishTime', title: '发布时间', width: 110},
                    {fixed: 'right',title:'操作', width: 220, align:'center', toolbar: '#table_admin'}
                    ]
                ],
                //用于搜索结果重载
                id: 'sreload'
            });

            var active = {
                search_table: function(){
                    var title = $('#title');
                    var type  = $(".type_select option:selected");
                    var houseType = $('#houseType');
                    var floorLevel = $(".floorLevel_select option:selected");
                    var region = $(".region_select option:selected");
                    var housingEstate = $('#housingEstate');
                    var rentType  = $(".rentType_select option:selected");
                    var decoration = $(".decoration_select option:selected");
                    var orientation = $(".orientation_select option:selected");

                    //执行重载
                    table.reload('sreload', {
                        //一定要加不然乱码
                        method: 'post'
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            //表示传到后台的参数
                            title: title.val(),
                            type: type.val(),
                            houseType: houseType.val(),
                            floorLevel: floorLevel.val(),
                            region: region.val(),
                            housingEstate : housingEstate.val(),
                            rentType  : rentType.val(),
                            decoration : decoration.val(),
                            orientation : orientation.val()
                        }
                    });
                },
                add: function() {
                    layer.open({
                        type: 2,
                        title: '添加租房信息',
                        skin: 'layui-layer-demo', //加上边框
                        area: ['700px', '650px'], //宽高
                        content: '/rentHouse/addRentHouse'
                    });
                },
                batchdel:function () {
                    var checkAll = table.checkStatus('sreload');
                    if(checkAll.data.length == 0){
                        layer.msg('请选择数据进行删除');
                    }else{
                        layer.confirm('真的删除行么', function(){
                            var jsonObj = {};
                            for(var i=0;i<checkAll.data.length;i++){
                                jsonObj["ids["+i+"]"] = checkAll.data[i].id;
                            }
                            $.ajax({
                                url:'/rentHouse/delRentHouse',
                                data:jsonObj,
                                dataType:'json',
                                type:'post',
                                success:function (data) {
                                    if (data.success){
                                        window.location.reload();
                                    }else{
                                        layer.msg(data.message);
                                    }
                                }
                            })
                        });
                    }

                }
            };

            $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            table.on('tool(table)', function(obj){ //注：tool 是工具条事件名，table 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'edit'){
                    edit(data);
                } else if(layEvent === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        del(data,obj,index);
                    });
                }else if( layEvent == 'detail'){
                    detail(data)
                }
            });

            function edit(data) {
                layer.open({
                    type: 2,
                    title: '修改租房信息',
                    skin: 'layui-layer-demo', //加上边框
                    area: ['700px', '650px'], //宽高
                    method: 'post',
                    content: '/rentHouse/addRentHouse?type=edit&id='+data.id
                });
            }

            function detail(data) {
                layer.open({
                    type: 2,
                    title: '查看详细租房信息',
                    skin: 'layui-layer-demo', //加上边框
                    area: ['700px', '650px'], //宽高
                    method: 'post',
                    content: '/rentHouse/detailRentHouse?id='+data.id
                });
            }

            //后边两个参数仅仅是因为要执行动态删除dom
            function del(data,obj,index){
                var jsonObj = {};
                jsonObj["ids[0]"] = data.id;
                $.ajax({
                    url:'/rentHouse/delRentHouse',
                    data:jsonObj,
                    dataType:'json',
                    type:'post',
                    success:function (data) {
                        if (data.success){
                            obj.del(); //删除对应行（tr）的DOM结构
                            layer.close(index);
                        }else{
                            layer.msg(data.message);
                        }
                    }
                })
            }

        });


    </script>

    <script type="text/html" id="indexTpl">
        {{d.LAY_TABLE_INDEX+1}}
    </script>
</body>
</html>